<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/x-icon"
      href="https://jf.10086.cn/static/headicon.png"
    />
    <title>中国移动积分商城商品详情商城</title>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" href="../css/shouye.css" />

    <link rel="stylesheet" href="../css/xiangqing.css" />

    <script src="../js/jquery.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        <!-- 顶部导航栏 -->
        <div id="top">
          <div class="container fx cl666">
            <div id="ccc">
              <span>您好，欢迎访问中国移动积分商城</span>
              <a href="./Login.html"
                ><span class="clRed ml30 pointer"> 请登录 </span></a
              >
            </div>
            <div id="ccc1" style="display: none">
              <span class="ml10">您好</span>
              <span></span>
              <span class="pointer ml10 clRed">退出</span>
            </div>
            <div class="topright fx">
              <div class="tab-top pointer tab-top1" style="display: none">
                我的账户
              </div>
              <div class="tab-top pointer tab-gouwu">购物车</div>
              <div class="tab-top">
                手机版
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                <div class="hide-top" style="display: none">
                  <div class="app-code">
                    <img
                      src="https://jf.10086.cn/static/img/APPcode.4a1af6e.png"
                    />
                  </div>
                  <p>中国移动</p>
                  <p>手机营业厅</p>
                </div>
              </div>
              <div class="tab-top">
                客户服务
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                <div class="hide-top" style="display: none">
                  <p class="top-menu">帮助中心</p>
                </div>
              </div>
              <div class="tab-top">
                网站导航
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                <div class="hide-top" style="display: none">
                  <p class="top-menu">中国移动首页</p>
                  <p class="top-menu">移动商城</p>
                  <p class="top-menu">139邮箱</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二部分 -->
        <div class="h120" id="h120">
          <div class="searchbox">
            <div class="container fx">
              <!-- 开始logo -->
              <div class="logo">
                <a href="http://localhost:8080/html/shouye.html"
                  ><img
                    src="	https://jf.10086.cn/static/img/logo.fccfc0f.png"
                    alt=""
                    style="width: 100%"
                /></a>
              </div>
              <!-- 中间部分 -->
              <div class="seabox">
                <div class="seaboxtop seaboxtop-input">
                  <!-- seaboxtop-input-right -->
                  <input
                    type="text"
                    autocomplete="off"
                    maxlength="15"
                    id="seabox"
                    class="seaboxinner"
                    value="你好"
                  />
                  <div class="seaboxtop-input-right">
                    <button class="seabtn">
                      <i class="icon1 iconfont icon-sousuo"></i>
                    </button>
                  </div>
                </div>
                <!-- 隐藏的ul,用于存放搜索接口的数据 -->
                <ul class="selectList"></ul>
                <!-- 热搜词，正常的应该是使用接口，输入后台传来的热搜数据 -->
                <div class="hots">
                  <span>热门搜索：</span>
                  <span class="hotitem">爱奇艺</span>
                  <span class="hotitem">腾讯</span>
                  <span class="hotitem">流量</span>
                  <span class="hotitem">蓝牙耳机</span>
                  <span class="hotitem">耳机</span>
                  <span class="hotitem">优酷</span>
                  <span class="hotitem">和平精英</span>
                </div>
              </div>
              <!-- 结束二维码 -->
              <div class="scan">
                <div class="scanCode">
                  <img
                    src="	https://jf.10086.cn/static/img/hejifen.ece7db2.jpg"
                    alt=""
                  />
                </div>
                <span class="mt8">积分商城微信公众号</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 第三部分 -->
        <div class="h40" id="h40">
          <div class="toptab">
            <div class="container fx">
              <div class="allclass">
                <img
                  src=""
                  alt=""
                  class="mulClass"
                />
                全部商品分类
              </div>
              <div class="menutab classA">我能兑换</div>
              <div class="menutab classA">品牌专区</div>
              <div class="menutab classA">乡村振兴</div>
              <div class="menutab classA">990包邮</div>
            </div>
          </div>
        </div>

        <!-- 第四部分  购物车详情展示部分-->
        <!-- 旧的 -->
        <!--  <div class="fx pb40" style="clear: both">
                <div class="w400">
                    <div id="zong">
                        <div id="midbox">
                            <img src=" ">
                            <div id="zoom"></div>
                        </div>
                        <div id="bigbox">
                            <img src="">
                        </div>
                        <div id="smabox">
                            <img src="">
                        </div>
                        <p class="notes">
                            图片仅供参考，实际兑换礼品请以实物或者您收到的服务为准
                        </p>
                        <div class="fx">
                            <div class="line22">
                                <p>手机兑换</p>
                                <p class="steps">方式一：打开手机扫一扫【二维码】即可兑换。</p>
                                <p class="steps">
                                    方式二：发送短信兑换码DH11283466 到
                                    10658999，短信兑换仅支持全积分兑换礼品(发送及接收短信免费)。
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="jieshao">
                    <h1></h1>
                    <p class="pid">商品编号：<span></span> </p>
                    <p class="pprice">价格:<span></span></p>
                    <p class="pdesc">介绍:<span></span></p>

                    <span class="jian">-</span>
                    <input type="text" value="1" class="num1">
                    <span class="jia">+</span>
                    <input type="button" value="加入购物车" class="btn">
                </div>


            </div> -->

        <!-- 新的 -->

        <div class="fx pb40" style="clear: both">
          <div class="w400">
            <div id="zong">
              <div id="midbox">
                <img src=" " />
                <div id="zoom"></div>
              </div>
              <div id="bigbox">
                <img src="" />
              </div>
              <div id="smabox">
                <img src="" />
              </div>
              <p class="notes">
                图片仅供参考，实际兑换礼品请以实物或者您收到的服务为准
              </p>
              <div class="duihuan">
                <div class="fangfa">
                  <div class="fangfa1"><span>手机兑换：</span></div>
                  <div class="fangfa1">
                    方式一：打开手机扫一扫【二维码】即可兑换。
                  </div>
                  <div class="fangfa1">
                    方式二：发送短信兑换码DH11221657 到
                    10658999，短信兑换仅支持全积分兑换礼品(发送及接收短信免费)。
                  </div>
                </div>
                <img
                  alt="Scan me!"
                  src=""
                  style="display: block"
                />
              </div>
            </div>

            <div class="jieshao">
              <div class="tou fx">
                <h1 class="pdesc hh">商品详情：<span>你去超市的</span></h1>
                <div class="toutou">商品名称: <span>阿斯蒂芬的</span></div>
              </div>

              <p class="pdesc">介绍:<span>撒打发</span></p>
              <p class="pid">商品编号：<span>阿斯顿f'sfsda</span></p>

              <div class="jiage">
                <p class="pprice">价格:<span>爱的色放</span>积分</p>
                <p class="tishi">
                  重要提示：
                  <span>
                    产品如有质量问题或使用咨询，请拨打售后服务热线：400 003
                    8559（工作时间：9:00-20:00）</span
                  >
                </p>
              </div>

              <div class="leixing li2">
                <div class="li3">样式 ：</div>
                <div class="yangshi">
                  <span class="yang1">红色</span> <span>绿色</span>
                  <span>黄色</span>
                </div>
              </div>
              <div class="leixing li2">
                <div class="li3">规格 ：</div>
                <div class="yangshi">
                  <span class="yang1">小号</span><span>中号</span
                  ><span>大号</span>
                </div>
              </div>
              <div class="leixing li2">
                <div class="li3">付款方式 ：</div>
                <div class="yangshi">
                  <span class="yang1">积分</span><span>现金</span>
                </div>
              </div>

              <div class="td td-num">
                <b>数量：</b>
                <div class="td-bianji">
                  <div class="jian">➖</div>
                  <div class="zhong">
                    <input type="text" value="1" class="num1" />
                  </div>
                  <div class="jia">➕</div>
                </div>
              </div>
              <div class="td td-btn">
                <button class="btn">加入购物车</button>
              </div>
            </div>
          </div>

          <!-- 底部 -->
        </div>

        <!-- 底部 -->
      </div>
    </div>
    <!-- 引入登录页面的接口 -->
    <!-- <script src="../js/top.js"></script> -->

    <script>
      let pidd = window.location.search.replace("?", "");
      console.log(pidd);

      let pid = document.querySelector(".pid");
      let pprice = document.querySelector(".pprice");
      let pdesc = document.querySelector(".pdesc");

      let midbox = document.getElementById("midbox");
      let bigbox = document.getElementById("bigbox");
      let smabox = document.getElementById("smabox");

      let jian = document.querySelector(".jian");
      let jia = document.querySelector(".jia");
      let num = document.querySelector(".num1");
      let btn = document.querySelector(".btn");

      jian.onclick = function () {
        // console.log(num.value)
        num.value--;

        if (num.value < 1) {
          num.value = 1;
        }
      };
      jia.onclick = function () {
        // console.log(num.value)
        num.value++;
      };
      num.onblur = function () {
        if (num.value < 1) {
          num.value = 1;
        }
      };
      let udpdata = JSON.parse(localStorage.getItem("udpdata"));
      // console.log(udpdata);
      let udpid = udpdata.data.id;
      console.log(udpid);
      //  添加购物车数据
      btn.onclick = function () {
        $.ajax({
          type: "get",
          url: "http://jx.xuzhixiang.top/ap/api/add-product.php",
          data: {
            uid: udpid,
            pid: pidd,
            pnum: num.value,
          },
          // dataType: "dataType",
          success: function (data) {
            console.log(data);
            if (data.code == 0) {
              window.location.href = "http://localhost:8080/html/login.html";
            } else {
              window.location.href =
                "http://localhost:8080/html/cart.html?" + udpid;
            }
          },
        });
      };

      // 本地有数据传入时，
      let flag;
      if ((flag = udpid)) {
        $("#ccc1").css({ display: "block" });
        $("#ccc1 span").eq(1).text(udpdata.data.username);
        $("#ccc").css({ display: "none" });
        $(".tab-top1").css({ display: "block" });
      }
      $(".ml10").click(function () {
        $("#ccc1").css({ display: "none" });
        $("#ccc").css({ display: "block" });
        $(".tab-top1").css({ display: "none" });
        delete udpdata.data.id;
        console.log(udpdata);
        localStorage.setItem("udpdata", JSON.stringify(udpdata));
        window.location.href =
          "http://localhost:8080/html/xiangqing.html?" + pidd;
      });

      $.ajax({
        type: "get",
        url: "http://jx.xuzhixiang.top/ap/api/detail.php",
        data: { id: pidd },
        dataType: "json",
        success: function (data) {
          console.log(data);

          midbox.children[0].src = data.data.pimg;
          bigbox.children[0].src = data.data.pimg;
          smabox.children[0].src = data.data.pimg;

          // pdesc.children[0].innerText = data.data.pdesc;
          $(".pdesc span").text(data.data.pdesc);

          pid.children[0].innerText = data.data.pid;
          pprice.children[0].innerText = data.data.pprice;
          $(".toutou span").text(data.data.pname);
        },
      });

      $(".yangshi span").click(function () {
        $(this).addClass("yang1").siblings().removeClass("yang1");

        console.log();
      });

      $(".tab-gouwu").click(function () {
        if ((flag = udpid)) {
          window.location.href =
            "http://localhost:8080/html/cart.html?" + udpid;
        } else {
          window.location.href = "http://localhost:8080/html/login.html";
        }
      });
    </script>

    <script>
      //  面向对象的方式去创建
      class Zoom {
        //在构造器中获取所需的各个元素
        constructor() {
          this.zong = document.getElementById("zong"); //    获得整体盒子
          this.midbox = document.getElementById("midbox"); //   获得中间正常区域盒子
          this.midboximg = this.midbox.children[0]; //         获取中间正常区域盒子图片
          this.bigbox = document.getElementById("bigbox"); //    获取放大区域盒子
          this.bigboximg = this.bigbox.children[0]; //      获取放大区域盒子 图片
          this.smabox = document.getElementById("smabox"); //  获取最小盒子
          this.smaboximg = this.smabox.children; //            获取最小盒子的图片
          this.zoom = document.getElementById("zoom"); //           获取放大镜
          // 调用方法
          this.showAndHidden();
          this.move();
          this.change();
        }
        //    展示 和  隐藏   放大镜与放大区域
        showAndHidden() {
          this.midbox.onmouseover = () => {
            this.zoom.style.display = "block";
            this.bigbox.style.display = "block";
          };
          this.midbox.onmouseout = () => {
            this.zoom.style.display = "none";
            this.bigbox.style.display = "none";
          };
        }
        //   放大镜 在 正常区域 内移动时  ，限制边界
        move() {
          this.midbox.onmousemove = (e) => {
            let evt = e || window.event;
            //  获取 放大镜的 位置信息  ， 即  当前对象（鼠标） 距离可视窗口的距离 -  整体盒子到窗口的左边距  -放大镜自身的一半
            let x =
              evt.pageX - this.zong.offsetLeft - this.zoom.offsetWidth / 2;

            let y =
              evt.pageY - this.zong.offsetTop - this.zoom.offsetHeight / 2;

            // console.log(x, y);

            //  判断 边界值 ，保证鼠标和放大镜的中心位置一致  ，并且 放大镜不能超出边界
            if (x < 0) {
              x = 0;
            }
            if (y < 0) {
              y = 0;
            }
            if (x >= this.midbox.offsetWidth - this.zoom.offsetWidth) {
              x = this.midbox.offsetWidth - this.zoom.offsetWidth;
            }
            if (y >= this.midbox.offsetHeight - this.zoom.offsetHeight) {
              y = this.midbox.offsetHeight - this.zoom.offsetHeight;
            }
            this.zoom.style.left = x + "px";
            this.zoom.style.top = y + "px";
            // console.log(this.zoom.style.top );
            //   改变大图的位置  ，使其与放大镜的移动距离   成比例 移动
            let bl = this.midbox.offsetWidth / this.zoom.offsetWidth;
            //   这里的值应该是 放大镜到父元素 左右边距  距离  *相应的比例的  ，不是 放大镜的定位值
            this.bigboximg.style.left = -this.zoom.offsetLeft * bl + "px";
            this.bigboximg.style.top = -this.zoom.offsetTop * bl + "px";
            // // console.log(this.bigboximg.style.top);
            // console.log(this.bigboximg.style.left);
          };
        }
        //   点击小图的图片  ，保证三者之间的对应 ，能够切换图片
        change() {
          for (let i = 0; i < this.smaboximg.length; i++) {
            this.smaboximg[i].onclick = () => {
              this.midboximg.src = this.bigboximg.src = this.smaboximg[i].src;
            };
          }
        }
      }

      let zoom1 = new Zoom();
    </script>

    <script></script>
  </body>
</html>
